<template>
  <div class="personnel-positioning">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <div class="main-container">
      <main>
        <div class="map-container">
          <div class="search-container">
            <span class="title">人员分布图</span>
            <div class="item">
              <label>在场人数</label>
              <span class="text">{{ attendanceNumber }}</span>
            </div>
            <div class="search-item">
              <label>时间：</label>
              <el-date-picker
                placeholder="选择日期"
                type="datetime"
                v-model="searchDate"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="23:59:59"
                :picker-options="{
                  disabledDate: this.setDisabledData
                }">
              </el-date-picker>
            </div>
          </div>
          <div class="map-content">
            <b-map ref="mapRef" :centerOptions="centerOptions" :markers="markers"></b-map>
          </div>
        </div>
<!--        <div class="detail-container">-->
<!--          <div class="detail">-->
<!--            <div class="item">-->
<!--              <label class="time">{{ $moment(currentDate).format('MM月DD日') }}</label>-->
<!--              <el-select v-model="workId" placeholder="请选择工区">-->
<!--                <el-option-->
<!--                  v-for="(item, index) in workList"-->
<!--                  :value="item.BaseStationNum"-->
<!--                  :label="item.BaseStationName"-->
<!--                  :key="index"-->
<!--                  :title="item.BaseStationName"-->
<!--                >-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--              <label>在场人数</label>-->
<!--              <span class="text">{{ attendanceNumber }}</span>-->
<!--            </div>-->
<!--            <div class="item">-->
<!--              <label>健康预警</label>-->
<!--              <span class="text" @click="handleClick(true)">0</span>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div v-show="hasErrInfo" class="err-info">-->
<!--            <div class="title">-->
<!--              <span class="text">预警列表</span>-->
<!--              <i class="el-icon-download"></i>-->
<!--            </div>-->
<!--            <el-table-->
<!--              class="table-content"-->
<!--              v-loading="tableLoading"-->
<!--              :max-height="$setRem(450)"-->
<!--              element-loading-custom-class="custom-load"-->
<!--              :data="tableData">-->
<!--              <el-table-column label="发生时间">-->
<!--                <template slot-scope="scope">-->
<!--                  <div class="info"></div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="预警描述">-->
<!--                <template slot-scope="scope">-->
<!--                  <div class="detail-info"></div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="预警事件">-->
<!--                <template slot-scope="scope">-->
<!--                  <div class="detail-info"></div>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column prop="status" label="状态"></el-table-column>-->
<!--              <el-table-column label="操作">-->
<!--                <template slot-scope="scope">-->
<!--                  <i class="iconfont iconchakan" @click="handleDetail(scope.row)"></i>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--            </el-table>-->
<!--          </div>-->
<!--          <div v-show="!hasErrInfo" class="personnel-info">-->
<!--            <div class="info">-->
<!--              <div class="title">人员信息</div>-->
<!--              <div class="info_item">-->
<!--                <img src="../../../assets/images/rain.png" alt="" />-->
<!--                <ul>-->
<!--                  <li>-->
<!--                    <label>姓名：</label>-->
<!--                    <span>火山</span>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <label>性别：</label>-->
<!--                    <span>男</span>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <label>年龄：</label>-->
<!--                    <span>18</span>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <label>籍贯：</label>-->
<!--                    <span>浙江杭州</span>-->
<!--                  </li>-->
<!--                </ul>-->
<!--              </div>-->
<!--              <div class="info_item">-->
<!--                <ul class="list">-->
<!--                  <li>-->
<!--                    <label>班组：</label>-->
<!--                    <span>电子部</span>-->
<!--                  </li>-->
<!--                  <li>-->
<!--                    <label class="col">工种(岗位)：</label>-->
<!--                    <span>资深嵌入式开发</span>-->
<!--                  </li>-->
<!--                  <li class="row">-->
<!--                    <label>身体状况：</label>-->
<!--                    <span>正常</span>-->
<!--                  </li>-->
<!--                  <li class="row">-->
<!--                    <label>联系方式：</label>-->
<!--                    <span>132210654231</span>-->
<!--                  </li>-->
<!--                </ul>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="status">-->
<!--              <div class="title">健康状态</div>-->
<!--              <ul>-->
<!--                <li>-->
<!--                  <label>状态：</label>-->
<!--                  <span>起飞</span>-->
<!--                </li>-->
<!--                <li>-->
<!--                  <label>血压：</label>-->
<!--                  <span>100</span>-->
<!--                </li>-->
<!--                <li>-->
<!--                  <label>心跳：</label>-->
<!--                  <span>70</span>-->
<!--                </li>-->
<!--                <li>-->
<!--                  <label>体温：</label>-->
<!--                  <span>36.5℃</span>-->
<!--                </li>-->
<!--                <li>-->
<!--                  <label>心率：</label>-->
<!--                  <span>100</span>-->
<!--                </li>-->
<!--              </ul>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
      </main>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';
import bMap from '@/components/corp/Map';

export default {
  data() {
    return {
      breadcrumbData: [
        {
          name: '人员管理',
        },
        {
          name: '人员定位'
        }
      ],
      attendanceNumber: null,
      longitude: '',
      latitude: '',
      tableLoading: false,
      tableData: [],
      // 选择人员时间
      searchDate: this.$moment().format('yyyy-MM-DD HH:mm:ss'),
      // 工区id
      workId: '',
      // 工区信息
      workList: [],
      // 工区人员
      workPerson: [],
      // 人员标记点
      markers: [],
      // 是否展示预警信息
      hasErrInfo: true
    };
  },
  computed: {
    // 项目id
    projectId() {
      return this.$store.state.currentProjectId;
    },
    // 地图中心点设置
    centerOptions() {
      return {
        zoom: 16,
        longitude: this.longitude,
        latitude: this.latitude
      };
    },
    // 当前时间
    currentDate() {
      return this.searchDate || this.$moment().format('yyyy-MM-DD') + ' 23:59:59';
    },
  },
  watch: {
    workId(value) {
      value && this.getPresentNumber();
    },
    searchDate(value) {
      value && this.getPresentNumber();
    }
  },
  async created() {
    this.getBaseStationList();
    await this.getPresentNumber();
  },
  components: {
    bMap,
    Breadcrumb
  },
  methods: {
    /**
     * 查询基站数据
     */
    async getBaseStationList() {
      const { success, data } = await this.$Model.getBaseStationList({
        project_id: this.projectId,
        page: '1',
        limit: '1000'
      });
      if (success && data.data) {
        const { base_stations } = data.data;
        this.workList = base_stations || [];
        const item = this.workList[0] || {};
        if (item) {
          this.longitude = item.X;
          this.latitude = item.Y;
        }
        this.setMarkers();
      }
    },
    /**
     * 查询基站附近的人员数据
     */
    async getPresentNumber() {
      const startTime = this.currentDate.replace(/\d{2}:\d{2}:\d{2}/, '00:00:00');
      const params = {
        project_id: this.projectId,
      };
      if (this.workId) params.base_station_num = this.workId;
      const { success, data } = await this.$Model.getPresentNumber(params);
      console.log('getPresentNumber', data);
      if (success && data.data) {
        this.attendanceNumber = data.data || '';
        // this.workPerson = workers || [];
      }
    },
    setMarkers() {
      this.markers = this.workList.map(item => {
        const { X, Y, BaseStationName } = item;
        return {
          lng: X,
          lat: Y,
          options: {
            width: 200,
            height: 50
          },
          message: BaseStationName,
          evtFn: this.handleMapPointClick
        };
      });
    },
    // 设置置灰时间
    setDisabledData(time) {
      return time.getTime() > Date.now();
    },
    /**
     * 切换人员信息和健康预警
     * @param show {Boolean} 是否切换
     */
    handleClick(show) {
      this.hasErrInfo = show;
    },
    // 标记点点击事件
    handleMapPointClick(e) {
      console.log(e);
      this.hasErrInfo = false;
    },
    /**
     * 查看预警详情
     * @param row {Object}
     */
    handleDetail(row) {}
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';

  .personnel-positioning {
    width: 100%;
    height: 100%;
    position: relative;
    background: $mainBg;
    .main-container {
      width: 100%;
      height: calc(100% - 40px);
      background: $baseBg;
      padding: 20px;
      main {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: $baseBg;
        .map-container {
          /*width: 74%;*/
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .search-container {
            width: 100%;
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .title {
              font-size: 18px;
              font-weight: bold;
              letter-spacing: 2px;
            }
            .search-item {
              width: 370px;
              height: 100%;
              display: flex;
              justify-content: space-between;
              align-items: center;
              /deep/ .el-date-editor {
                width: 310px;
              }
              label {
                width: 60px;
              }
            }
            .item {
              display: flex;
              align-items: center;
              label {
                font-size: 20px;
                font-weight: bold;
                margin-right: 50px;
                &.time {
                  font-size: 30px;
                }
              }
              .text {
                font-family: font-lcd;
                font-size: 40px;
                text-shadow: 0 1px 13px $mainColor;
                font-weight: bold;
                margin-left: 20px;
                cursor: pointer;
                color: $mainColor;
                letter-spacing: 3px;
              }
            }
          }
          .map-content {
            flex: 1;
            height: 100%;
            position: relative;
          }
        }
        .detail-container {
          width: 25%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          > div {
            border-radius: 10px;
            background-color: $mainBg;
            width: 100%;
          }
          .detail {
            height: 33%;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: 20px;
            .item {
              display: flex;
              align-items: center;
              margin-bottom: 20px;
              label {
                font-size: 20px;
                font-weight: bold;
                margin-right: 50px;
                &.time {
                  font-size: 30px;
                }
              }
              .text {
                font-family: font-lcd;
                font-size: 40px;
                text-shadow: 0 1px 13px $mainColor;
                font-weight: bold;
                margin-left: 20px;
                cursor: pointer;
                color: $mainColor;
                letter-spacing: 3px;
              }
            }
          }
          .err-info {
            height: 66%;
            padding: 10px;
            .title {
              width: 100%;
              height: 30px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 18px;
              margin-bottom: 10px;
              .text {
                font-weight: bold;
              }
              i {
                font-size: 24px;
                cursor: pointer;
              }
            }
          }
          .personnel-info {
            height: 66%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            background: $baseBg;
            > div {
              width: 100%;
              height: 49%;
              border-radius: 10px;
              background: $mainBg;
            }
            .info, .status {
              padding: 10px;
              .title {
                width: 100%;
                height: 30px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                font-size: 18px;
                margin-bottom: 10px;
                font-weight: bold;
              }
              &_item {
                width: 100%;
                height: 100px;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                img {
                  width: 120px;
                  height: 100px;
                  display: inline-block;
                  margin-right: 20px;
                }
                ul {
                  height: 100%;
                  flex: 1;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: space-between;
                  align-items: center;
                  li {
                    width: 150px;
                    margin: 0 5px 5px 0;
                    font-size: 14px;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    label {
                      width: 65px;
                      color: $mainColor;
                      font-size: 15px;
                      font-weight: bold;
                      letter-spacing: 2px;
                      display: inline-block;
                    }
                    span {
                      display: inline-block;
                      width: 120px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    }
                  }
                }
                .list {
                  padding: 10px 10px 0;
                  li {
                    width: 200px;
                    padding-bottom: 5px;
                    &.row {
                      width: 100%;
                      span {
                        width: 300px;
                      }
                      label {
                        width: 100px;
                      }
                    }
                    label {
                      width: 60px;
                      &.col {
                        width: 130px;
                      }
                    }
                  }
                }
              }
            }
            .status {
              ul {
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                align-items: center;
                padding: 10px 40px;
                li {
                  width: 50%;
                  height: 40px;
                  margin-bottom: 20px;
                  display: flex;
                  align-items: center;
                  &:nth-child(1) {
                    width: 100%;
                  }
                  label {
                    color: $mainColor;
                    font-size: 15px;
                    font-weight: bold;
                    letter-spacing: 2px;
                  }
                  span {
                    font-size: 14px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
</style>
